<layout name="master"/>
<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
    <li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#">商品管理</a></li>
    <li><a href="#">商品添加</a></li>
</ul>
<div class="m-b-md">
    <h3 class="m-b-none">商品添加</h3>
</div>
<section class="panel panel-default">
    <header class="panel-heading font-bold">商品添加</header>
    <div class="panel-body">
        <form class="form-horizontal" method="post" action="">
            <div class="form-group">
                <label class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-10">
                    <select name="cid" class="form-control m-b">
                        <option value="0" tid="a">请选择</option>
                        <volist name="classData" id="v">
                        <option <if condition="$v['cid'] == $oldData['cid']">selected</if> value="{$v['cid']}" pid="{$v['pid']}" tid="{$v['tid']}">{$v['_cname']}</option>
                        </volist>
                    </select>
                </div>
            </div>

            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所属品牌</label>
                <div class="col-sm-10">
                    <select name="bid" class="form-control m-b">
                        <option value="0">请选择</option>
                        <volist name="brandData" id="v">
                        <option <if condition="$v['bid'] == $oldData['bid']">selected</if> value="{$v['bid']}">{$v['bname']}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                    <input type="text" name="gname" class="form-control" value="{$oldData['gname']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品货号</label>
                <div class="col-sm-10">
                    <input type="text" name="gcode" class="form-control" value="{$oldData['gcode']}">
                    <span class="help-block m-b-none">请输入商品货号。。。</span>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="input-id-1">单位</label>
                <div class="col-sm-10">
                    <input value="{$oldData['gunit']}" type="text" name="gunit" class="form-control" id="input-id-1" placeholder="件/瓶/箱/条/盒/包 等。。。">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">市场价</label>
                <div class="col-sm-10">
                    <input type="number" name="mprice" class="form-control" value="{$oldData['mprice']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商城价</label>
                <div class="col-sm-10">
                    <input type="number"  class="form-control" name="xmprice" value="{$oldData['xmprice']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">点击次数</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="gclick" value="{$oldData['gclick']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存</label>
                <div class="col-sm-10">
                    <input type="text"  class="form-control" name="ginventory" value="{$oldData['ginventory']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品属性</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="attr">
                        <volist name="attrData" id="v">
                        <tr>
                            <td>{$v['tpname']}</td>
                            <td>
                                <select name="attr[{$v['tpid']}]" >
                                    <option value="">请选择</option>
                                    <volist name="v['tpvalue']" id="vo">
                                    <option value="{$vo}" <if condition="in_array($vo,$hasAddAttr)">selected</if>>{$vo}</option>
                                    </volist>
                                </select>
                            </td>
                        </tr>
                        </volist>
                    </table>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="spec">
                        <volist name="specData" id="v">
                        <tr>
                            <td>{$v['tpname']}</td>
                            <td>
                                <select name="spec[{$v['tpid']}][spec][]" id="">
                                    <option value="">请选择</option>
                                    <volist name="v['tpvalue']" id="vo">
                                    <option value="{$vo}" <if condition="$vo == $v['gattr']">selected</if> >{$vo}</option>
                                    </volist>
                                </select>
                            </td>
                            <td>
                                附加价格
                            </td>
                            <td>
                                <input type="text" name="spec[{$v['tpid']}][added][]" value="{$v['addprice']}">
                            </td>
                            <td>
                                <button class="btn btn-danger btn-xs delSpec">删除</button>
                            </td>
                        </tr>
                            <script>
                                $(function(){
                                    $("#spec").find("tr:contains({$v['tpname']})").eq(0).find("td:last").html('<button  type="button" class="btn btn-success btn-xs addSpec">追加</button>');
                                })
                            </script>
                        </volist>
                    </table>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--引入uploadify相关js、css-->
            <script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
            <link rel="stylesheet" href="__PUBLIC__/uploadify/uploadify.css">
            <style>
                li{
                    list-style: none;
                }
            </style>
            <div class="form-group">
                <label class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-2">
                    <input type="file" name="file_upload" id="list-pic" />
                    <script>
                        $(function() {
                            $("#list-pic").uploadify({
                                'height'        : 30,
                                'swf'           : '__PUBLIC__/uploadify/uploadify.swf',
                                'uploader'      : "{:u('Admin/Goods/ajaxUpload')}",
                                'width'         : 120,
                                'buttonText' : '请选择文件',
                                'successTimeout' : 30,
                                'fileSizeLimit' : '2000KB',
                                'uploadLimit' : 10,
                                'removeTimeout' : 0.2,
                                'fileTypeExts' : '*.gif; *.jpg; *.png',
                                'onUploadSuccess' : function(file, data, response) {
                                        var li = '<li path="'+data+'" style="float: right"><img src="__ROOT__/'+data+'" style="width: 80px"/><a href="javascript:;" style="color:red" class="del-img">X</a><input name="glist" hidden value="'+data+'"/></li>';
                                        $('#listPic').append(li);
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-sm-8" id="listPic">
                    <li path="{$oldData['glist']}" style="float: right">
                        <img src="__ROOT__/{$oldData['glist']}" style="width: 80px"/>
                        <a href="javascript:;" style="color:red" class="del-img">X</a>
                        <input name="glist" hidden value="{$oldData['glist']}"/>
                    </li>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图册</label>
                <div class="col-sm-2">
                    <input type="file" name="file_upload" id="detail-pic" />
                    <script>
                        $(function() {
                            $("#detail-pic").uploadify({
                                'height'        : 30,
                                'swf'           : '__PUBLIC__/uploadify/uploadify.swf',
                                'uploader'      : "{:u('Admin/Goods/ajaxUpload')}",
                                'width'         : 120,
                                'buttonText' : '请选择文件',
                                'successTimeout' : 30,
                                'fileSizeLimit' : '2000KB',
                                'uploadLimit' : 10,
                                'removeTimeout' : 0.2,
                                'fileTypeExts' : '*.gif; *.jpg; *.png',
                                'onUploadSuccess' : function(file, data, response) {
                                    var li = '<li path="'+data+'" style="float: right"><img src="__ROOT__/'+data+'" style="width: 80px"/><a href="javascript:;" style="color:red" class="del-img">X</a><input name="detailPic[]" hidden value="'+data+'"/></li>';
                                    $('#detailPic').append(li);
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-sm-8" id="detailPic">
                    <volist name="oldData['big']" id="v">
                        <li path="$v" style="float: right">
                            <img src="__ROOT__/{$v}" style="width: 80px"/>
                            <a href="javascript:;" style="color:red" class="del-img">X</a>
                            <input name="detailPic[]" hidden value="{$v}"/>
                        </li>
                    </volist>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--一如百度编辑js文件-->
            <script src="__PUBLIC__/ueditor/ueditor.config.js"></script>
            <script src="__PUBLIC__/ueditor/ueditor.all.js"></script>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品详情</label>
                <div class="col-sm-10">
                    <textarea name="gdetails" id="gdetails" style="width:700px">{$oldData['gdetails']}</textarea>
                    <script>
                        UE.getEditor('gdetails');
                    </script>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">售后服务</label>
                <div class="col-sm-10">
                    <textarea name="cservice" id="cservice" style="width:700px">{$oldData['cservice']}</textarea>
                    <script>
                        UE.getEditor('cservice');
                    </script>
                </div>
            </div>
            <input type="hidden" name="tid" value="{$oldData['tid']}">
            <button class="btn btn-twitter btn-block m-b-sm">提交</button>
        </form>
    </div>
</section>
<script>
    function controller($scope, $, _){
        //点击删除上传图片

    }
    $('#detailPic,#listPic').delegate('.del-img','click',function(){
        var path = $(this).parents('li').attr('path');
        var _this = $(this);
        $.post("{:u('Admin/Goods/delImg')}",{path:path},function(res){
            _this.parents('li').remove();
        })
    })
</script>

<script>
    //根据分类异步获取规格和属性
    $(function(){
        $("select[name=cid]").change(function(){
            //:selected选中的option的tid属性
            var tid =  $(':selected').attr('tid');
            var pid =  $('option:selected').attr('pid');
//            alert(tid);
            if(pid==0){
                alert('顶级分类不添加商品');
                $('select[name=cid]').val(0);
                return false;
            }
            //给隐藏域中name=tid的value写值
            $('input[name=tid]').val(tid);
           // alert(tid);
            $.post("{:u('ajaxGetAttr')}",{tid:tid},function(res){
                attr = '';spec='';
                $.each(res,function(k,v){
                    if(v.tptype==2){
                        //规格
                        spec += '<tr><td>'+v.tpname+'</td><td>';
                        spec += '<select name="spec[' + v.tpid + '][spec][]" id=""><option value="0">请选择</option>';
                        $.each(v.tpvalue,function(kk,vv){
                            spec += '<option value="'+vv+'">'+vv+'</option>';
                        })
                        spec += '</select></td><td>附加价格</td><td>';
                        spec += '<input type="text" name="spec[' + v.tpid + '][added][]" value="">';
                        spec += '</td><td>';
                        spec += '<button  type="button" class="btn btn-success btn-xs addSpec">追加</button>';
                        spec += '</td></tr>';
                    }else{
                        //属性
                        attr += '<tr><td>'+v.tpname+'</td><td>';
                        attr += '<select name="attr[' + v.tpid + ']" id=""><option value="0">请选择</option>'
                        $.each(v.tpvalue,function(kk,vv){
                            attr += '<option value="'+vv+'">'+vv+'</option>';
                        })
                        attr  += '</select></td></tr>';
                    }
                })
                $('#attr').html(attr);
                $('#spec').html(spec);
            },'json')
        })
    })
    //点击追加按钮，追加一项
    //live on delegate bind
    $('#spec').on('click','.addSpec',function(){
        var tr = $(this).parents('tr').clone();//将父级tr复制
        tr.find('.addSpec').remove();
        var del = '<button  type="button" class="btn btn-danger btn-xs delSpec">删除</button>'
        tr.find('td').last().html(del);
        $(this).parents('tr').after(tr);
    })
    //点击删除删除当前一项
    $('#spec').on('click','.delSpec',function(){
        $(this).parents('tr').remove();
    })
</script>

